<template>
  <div class="p-4">
    <div style="margin-bottom: 16px;">
      <a-input :value="queryNo" @input="queryNo = $event.target.value" placeholder="请输入序列号" style="width: 200px; margin-right: 8px;" />
      <a-button style="margin-right: 8px;" @click="fetchTreeTableData" :loading="loading">查询</a-button>
      <a-button type="primary" style="margin-right: 8px;" @click="expandAll">展开全部</a-button>
      <a-button type="primary" style="margin-right: 8px;" @click="collapseAll">折叠全部</a-button>
    </div>
    <BasicTable @register="register" :dataSource="treeTableData" :loading="loading">
      <template #toolbar>
        <!-- 工具栏内容 -->
      </template>
    </BasicTable>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
import { BasicColumn, BasicTable, FormSchema } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import axios from 'axios';
import { message } from 'ant-design-vue';
import { getAppEnvConfig } from '/@/utils/env';
import { useGlobSetting } from '/@/hooks/setting';

const globSetting = useGlobSetting();
const baseApiUrl = globSetting.apiUrl;
const columns: BasicColumn[] = [
  {
    title: '序列号',
    dataIndex: 'j0aser',
    fixed: 'left',
    width: 200,
  },
  {
    title: '层级',
    dataIndex: 'level',
    width: 150,
  },
  {
    title: '时间',
    dataIndex: 'j0stim',
    width: 150,
    customRender: ({ text }) => {
      if (text) {
        const date = new Date(text);
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        const seconds = String(date.getSeconds()).padStart(2, '0');
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      }
      return text;
    },
  },
  {
    title: '零件号',
    dataIndex: 'j0part',
    width: 300,
  },
  {
    title: '批次号',
    dataIndex: 'j0seq',
    width: 150,
  },
  {
    title: '消耗数量',
    dataIndex: 'hwqty',
    width: 150,
  },
];

const searchFormSchema: FormSchema[] = []; // 这里可以保持空数组，或者添加需要的表单字段

export default defineComponent({
  components: { BasicTable },
  setup() {
    const treeTableData = ref([]); // 明确指定类型为数组
    const loading = ref(false); // 加载状态
    const queryNo = ref(''); // 查询条件

    watch(queryNo, (newValue) => {
      console.log('queryNo changed:', newValue);
    });

    const { tableContext } = useListPage({
      tableProps: {
        title: '数据量大，查询后耐心等待',
        isTreeTable: true,
        rowSelection: {
          type: 'checkbox',
          getCheckboxProps(record: Recordable) {
            return { disabled: record.j0aser === '0' }; // 禁用根节点的选择框
          },
        },
        columns: columns,
        dataSource: treeTableData, // 直接绑定到 treeTableData
        rowKey: 'j0aser',
        searchInfo: {},
        formConfig: {
          schemas: searchFormSchema,
          autoSubmitOnEnter: true,
        },
        useSearchForm: true,
        actionColumn: {
          width: 120,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
        showActionColumn: false,
      },
    });

    // BasicTable绑定注册
    const [register, { expandAll, collapseAll }] = tableContext;

    async function fetchTreeTableData() {
      loading.value = true; // 设置加载状态为 true
      try {
        console.log('查询条件:', queryNo.value); // 打印查询条件
        const response = await axios.get(baseApiUrl+'/pcl/cmsZhuisuTree/queryParam', {
          params: { query: queryNo.value }, // 将查询条件传递给后端
        });

        if (response.data.success) {
          // 直接将返回的数据放入 treeTableData
          treeTableData.value = response.data.result;
        } else {
          console.error('请求失败:', response.data.message);
          // 可以在这里添加用户提示，例如使用消息提示组件
          message.error(response.data.message);
        }
      } catch (error) {
        console.error('获取数据失败:', error);
        // 可以在这里添加用户提示，例如使用消息提示组件
        message.error('请求发生错误，请稍后再试');
      } finally {
        loading.value = false; // 请求完成后设置加载状态为 false
      }
    }

    // 不再自动调用 fetchTreeTableData
    // fetchTreeTableData();

    return { register, expandAll, collapseAll, fetchTreeTableData, treeTableData, loading, queryNo }; // 返回 loading 状态和查询条件
  },
});
</script>